import QtQuick 2.0
import QtQuick.Controls 1.0
import "../content"

Rectangle {
    id:root
    width: parent.width
    height: parent.height
    color:Qt.rgba(255,210,10,0.7);
    signal logoff()
    Rectangle{
        id:window
        x:20
        anchors.verticalCenter: parent.verticalCenter
        width:parent.width*2/3
        height:parent.height*2/3
        color:Qt.rgba(255,255,0,0.7);
        UserM{
            id:user
        }
        LangM{
            id:lang
        }
        Power{
            id:power
            onLogoff: {

                root.logoff();
            }
        }

        states: [
            // In state 'middleRight', move the image to middleRightRect
            State {
                name: "user"
                PropertyChanges { target: user; opacity: 1; enabled: true}
                PropertyChanges { target: lang; opacity: 0; enabled: false ; }
                 PropertyChanges { target: power; opacity: 0; enabled: false ; }

            },

            State {
                name: "lang"
                PropertyChanges { target: lang; opacity: 1; enabled: true}
                PropertyChanges { target: user; opacity: 0; enabled: false ; }
                PropertyChanges { target: power; opacity: 0; enabled: false ; }


            },

            State {
                name: "power"
                PropertyChanges { target: power; opacity: 1; enabled: true ; }
                PropertyChanges { target: lang; opacity: 0; enabled: false}
                PropertyChanges { target: user; opacity: 0; enabled: false ; }

            }

        ]
        transitions: [
            // For any other state changes move x,y linearly over duration of 200ms.
            Transition {
                NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 1000 }
                NumberAnimation { properties: "opacity"; easing.type: Easing.OutBounce; duration: 1000 }
            }
        ]
    }
    Column{

        anchors.verticalCenter: root.verticalCenter
        anchors.right: root.right

        Image_B{
            height: root.height/5
            width: root.width/6
            id:b1

            text: "User"
            image_soure:"../pics/User.png"
            onEnter: {
                window.state="user"
            }
        }
        Image_B{
            id:b2
            height: root.height/5
            width: root.width/6

            text: "Lang"
            image_soure:lang.langselect
            onEnter: {
                window.state="lang"
            }
        }
        Image_B{

            height: root.height/5
            width: root.width/6
            text: "Masurement"
            image_soure: "../pics/mes.png"
        }
        Image_B{

            height: root.height/5
            width: root.width/6
            text: "Power"
            image_soure: "../pics/power.png"
            onEnter: {
                window.state="power"
            }
        }
    }


}
